import { createDraw } from '../../../../../Hooks/useDraw'
import { newSourceLayer, high_source } from './useMapSourceLayer'
import { Query } from '../../../../../Hooks/useQuery'
import { popupShow } from './usePopup'

let queryResult = ref([])
let draw
let showDialog = ref(false)
let isBox = ref(true)
/* 1、点击事件设置画笔实现拉框 */
const queryByDraw = (map) => {
  const { high_layer } = newSourceLayer(map)
  isBox.value = false
  draw = createDraw({
    type: 'Rectangle',
    source: high_source,
    callback: () => {
      let popup = document.querySelector('#popup')
      popup.setAttribute('style', 'display:none !important;')
    }
  })
  map.addInteraction(draw)
  draw.on('drawend', handleDraw)

  function handleDraw(evt) {
    draw.setActive(false)
    high_source.clear()
    let geometry = evt.feature.getGeometry()
    let service = {
      name: 'guanggu',
      layerId: 2
    }
    /* 2、调用查询接口实现拉框查询 */
    Query.queryByGeom({
      geometry,
      service,
      callback: querySuccess
    })
  }

  // 3、查询成功的回调
  function querySuccess(features) {
    if (features) {
      showDialog.value = true
      high_source.addFeatures(features)
      /* 要素的属性 */
      queryResult.value = features.map((item) => item.values_.values_)
      popupShow(map)
    } else {
      isBox.value = true
      ElMessage({
        type: 'error',
        duration: 1500,
        message: '只能查询有事件发生的区域！'
      })
    }
  }

  return {
    high_layer,
    draw
  }
}

export { queryResult, queryByDraw, showDialog, isBox }
